<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .bottom {
            flex: .5;
        }

        .top {
            flex: 3;
            display: flex;
        }

        .top-l {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .top-r {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        .right-top, .right-bottom {
            display: flex;
            flex: 1;
        }

        .right-top > div, .right-bottom > div {
            flex: 1;
        }
    </style>
</head>
<body id="03_01xinyongfengxian" data-title="信用风险">
<div class="container">
    <div class="top">
        <div class="top-l">
            <div class="trade-market">
                <header class="pageHeader">
                    <div class="inputGroup">
                        <label>筛选条件:</label>
                        <div class="mySelect" id="jingzhenglizhibiao">
                            <div class="myOption selected"><span class="text"></span><span class="icon"></span></div>
                            <ul class="myOptionBox">
                                <li class="myOption selected">青岛国际版权</li>
                                <li class="myOption">青岛国际版权2</li>
                                <li class="myOption">青岛国际版权3</li>
                            </ul>
                        </div>
                    </div>
                </header>
            </div>
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>指标排名</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="btnGroup">
                            <button class="active">贷款次数</button>
                            <button>累计贷款额-个人</button>
                            <br>
                            <button>累计贷款额-企业</button>
                            <button>贷款余额-企业</button>
                            <button>贷款余额-个人</button>
                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec001"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-r">
            <div class="right-top">
                <div class="chartBox ec002">
                    <div class="chartTitle">
                        <h3>不良率</h3>
                    </div>
                    <div class="chartContent">
                        <header>
                            <div class="inputGroup">
                                <label>筛选条件:</label>
                                <div class="mySelect" id="jingzhenglizhibiao2">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                    </div>
                                    <ul class="myOptionBox">
                                        <li class="myOption selected">担保方式</li>
                                        <li class="myOption">担保方式2</li>
                                        <li class="myOption">担保方式3</li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                        <div class="chartBody">
                            <div id="ec002"></div>
                        </div>
                    </div>
                </div>
                <div class="chartBox ec003">
                    <div class="chartTitle">
                        <h3>迁徙率</h3>
                    </div>
                    <div class="chartContent">
                        <header>
                            <div class="inputGroup">
                                <label>筛选条件:</label>
                                <div class="mySelect" id="jingzhenglizhibiao3">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                    </div>
                                    <ul class="myOptionBox">
                                        <li class="myOption selected">M1</li>
                                        <li class="myOption">M2</li>
                                        <li class="myOption">M3</li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                        <div class="chartBody">
                            <div id="ec003"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-bottom">
                <div class="chartBox ec004">
                    <div class="chartTitle">
                        <h3>集中度</h3>
                    </div>
                    <div class="chartContent">
                        <header>
                            <div class="inputGroup">
                                <label>筛选条件:</label>
                                <div class="mySelect" id="jingzhenglizhibiao4">
                                    <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                                    </div>
                                    <ul class="myOptionBox">
                                        <li class="myOption selected">开户人数</li>
                                        <li class="myOption">开户人数2</li>
                                        <li class="myOption">开户人数3</li>
                                    </ul>
                                </div>
                            </div>
                        </header>
                        <div class="chartBody">
                            <div id="ec004_ConcentrationDegree"></div>
                        </div>
                    </div>
                </div>
                <div class="chartBox ec005">
                    <div class="chartTitle">
                        <h3>贷款收入与逾期贷款损失率</h3>
                    </div>
                    <div class="chartContent">
                        <div class="chartBody">
                            <div id="ec005"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="chartBox ec002">
            <div class="chartTitle">
                <h3>管理风险列示</h3>
            </div>
            <div class="chartContent">
                <table>
                    <thead>
                    <tr>
                        <th>报警时间</th>
                        <th>预警指标</th>
                        <th>预警原因</th>
                        <th>平台名称</th>
                        <th>业务详述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>20180307 11:28:01</td>
                        <td>信用风险</td>
                        <td>借款集中度</td>
                        <td>鲁金宝</td>
                        <td class="more"><a href=""> 查看</a></td>
                    </tr>
                    <tr>
                        <td>20180307 11:28:01</td>
                        <td>信用风险</td>
                        <td>借款集中度</td>
                        <td>鲁金宝</td>
                        <td class="more"><a href=""> 查看</a></td>
                    </tr>
                    <tr>
                        <td>20180307 11:28:01</td>
                        <td>信用风险</td>
                        <td>借款集中度</td>
                        <td>鲁金宝</td>
                        <td class="more"><a href=""> 查看</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];
    $(function () {
        var ec001 = echarts.init($("#ec001")[0]);
        ec001.setOption(opt_bar_horizon);
        ec001.setOption({
            grid: {
                left: "22%",
                right: "16%",
                top: "15%"
            },
            xAxis: {
                type: 'value',
                name: '指数'
            },
            yAxis: {
                name: '市场',
                data: ['青岛国\n际版权', '青岛国\n际版权', '青岛国\n际版权', '青岛国\n际版权', '青岛国\n际版权'],
            },
            series: [{
                data: [1, 3, 5, 7.2, 10],
                type: 'bar',
                barWidth: "60%"
            }]
        });

        var ec002 = echarts.init($("#ec002")[0]);
        ec002.setOption(opt_line);
        ec002.setOption({
            grid: {
                top: "24%",
                right:'16%',
                bottom: '30%'
            },
            legend: {
                show: false
            },
            xAxis: {
                name: '月份',
                data: [1,2,3,4,5,6]
            },
            yAxis: {
                name: '不良率',
            },
            series: [
                {
                    name: '最高',
                    type: 'line',
                    symbol: 'circle',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    areaStyle: lineAreaStyle(0)

                },
                {
                    name: '最低',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 5, 2, 5, 3, 2, 0],
                    areaStyle: lineAreaStyle(1)

                }
            ]
        });

        var ec003 = echarts.init($("#ec003")[0]);
        ec003.setOption(opt_line);
        ec003.setOption({
            grid: {
                top: "24%",
                right:'16%',
                bottom: '30%'
            },
            legend: {
                show: false
            },
            xAxis: {
                name: '月份',
                data: [1,2,3,4,5,6]
            },
            yAxis: {
                name: '迁徙率',
            },
            series: [
                {
                    name: '最高',
                    type: 'line',
                    symbol: 'circle',
                    data: [11, 11, 15, 13, 18, 16, 10],
                    areaStyle: lineAreaStyle(0)
                },
                {
                    name: '最低',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 5, 2, 5, 3, 2, 0],
                    areaStyle: lineAreaStyle(1)
                }
            ]

        });

        //热力图
        var ec004 = echarts.init($("#ec004_ConcentrationDegree")[0]);
        var data = [
            [[1600, 1500, 1700, '山东', 1990], [600, 500, 700, '江苏', 1990]],
            [[1200, 1100, 1300, '山东', 2015], [200, 100, 300, '江苏', 2015]]
        ];
        ec004.setOption(opt_scatter)
        ec004.setOption(
            {
                legend: {
                    show: false
                },
                grid: {
                    top: "20%",
                    bottom: "26%"
                },
                series: [{
                    name: '1990',
                    data: data[0],
                    type: 'scatter',
                    symbolSize: function (data) {
                        return scatterSymbolSize(data)
                    },
                    label: {
                        emphasis: {
                            show: true,
                            formatter: function (param) {
                                return param.data[3];
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 10*bodyScale,
                            shadowColor: 'rgba(120, 36, 50, 0.5)',
                            shadowOffsetY: 5,
                        }
                    }
                },
                    {
                        name: '1991',
                        data: data[1],
                        type: 'scatter',
                        symbolSize: function (data) {
                            return scatterSymbolSize(data)
                        },
                        label: {
                            emphasis: {
                                show: true,
                                formatter: function (param) {
                                    return param.data[3];
                                },
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                shadowBlur: 10*bodyScale,
                                shadowColor: 'rgba(120, 36, 50, 0.5)',
                                shadowOffsetY: 5,
                            }
                        }
                    }]
            });
        var ec005 = echarts.init($("#ec005")[0]);
        ec005.setOption(opt_line);
        ec005.setOption({
            grid: {
                top: "25%",
                right:'16%',
                bottom:"20%"
            },
            legend: {
                show: false
            },
            xAxis: {
                name: '月份',
                data: [1,2,3,4,5,6]
            },
            yAxis: {
                name: '损失率',
            },
            series: [
                {
                    name: '最高',
                    type: 'line',
                    symbol: 'circle',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    areaStyle: lineAreaStyle(0)
                },
                {
                    name: '最低',
                    type: 'line',
                    symbol: 'circle',
                    data: [1, 5, 2, 5, 3, 2, 0],
                    areaStyle: lineAreaStyle(1)
                }
            ]
        });


        //本页所有图表
        allCharts = [ec001, ec002, ec003, ec004, ec005];

    });


</script>
</body>
</html>
